import React, { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Line } from '@ant-design/plots';

const HomeLineChart = () => {
  // const [data, setData] = useState([]);

  // useEffect(() => {
  //     asyncFetch();
  // }, []);

  // const asyncFetch = () => {
  //     fetch('https://gw.alipayobjects.com/os/bmw-prod/e00d52f4-2fa6-47ee-a0d7-105dd95bde20.json')
  //         .then((response) => response.json())
  //         .then((json) => setData(json))
  //         .catch((error) => {
  //             console.log('fetch data failed', error);
  //         });
  // };
  const data = [
    {
      name: '论文',
      year: '2009',
      gdp: 51,
    },
    {
      name: '论文',
      year: '2010',
      gdp: 60,
    },
    {
      name: '论文',
      year: '2011',
      gdp: 75,
    },
    {
      name: '论文',
      year: '2012',
      gdp: 85,
    },
    {
      name: '论文',
      year: '2013',
      gdp: 95,
    },
    {
      name: '论文',
      year: '2014',
      gdp: 104,
    },
    {
      name: '论文',
      year: '2015',
      gdp: 110,
    },
    {
      name: '论文',
      year: '2016',
      gdp: 111,
    },
    {
      name: '论文',
      year: '2017',
      gdp: 121,
    },
    {
      name: '论文',
      year: '2018',
      gdp: 136,
    },

    {
      name: '横向项目',
      year: '2009',
      gdp: 144,
    },
    {
      name: '横向项目',
      year: '2010',
      gdp: 149,
    },
    {
      name: '横向项目',
      year: '2011',
      gdp: 155,
    },
    {
      name: '横向项目',
      year: '2012',
      gdp: 161,
    },
    {
      name: '横向项目',
      year: '2013',
      gdp: 167,
    },
    {
      name: '横向项目',
      year: '2014',
      gdp: 175,
    },
    {
      name: '横向项目',
      year: '2015',
      gdp: 182,
    },
    {
      name: '横向项目',
      year: '2016',
      gdp: 187,
    },
    {
      name: '横向项目',
      year: '2017',
      gdp: 194,
    },
    {
      name: '横向项目',
      year: '2018',
      gdp: 205,
    },

    {
      name: '纵向项目',
      year: '2009',
      gdp: 241,
    },
    {
      name: '纵向项目',
      year: '2010',
      gdp: 247,
    },
    {
      name: '纵向项目',
      year: '2011',
      gdp: 265,
    },
    {
      name: '纵向项目',
      year: '2012',
      gdp: 270,
    },
    {
      name: '纵向项目',
      year: '2013',
      gdp: 278,
    },
    {
      name: '纵向项目',
      year: '2014',
      gdp: 306,
    },
    {
      name: '纵向项目',
      year: '2015',
      gdp: 292,
    },
    {
      name: '纵向项目',
      year: '2016',
      gdp: 269,
    },
    {
      name: '纵向项目',
      year: '2017',
      gdp: 266,
    },
    {
      name: '纵向项目',
      year: '2018',
      gdp: 285,
    },
    {
      name: '专利',
      year: '2009',
      gdp: 122,
    },
    {
      name: '专利',
      year: '2010',
      gdp: 152,
    },
    {
      name: '专利',
      year: '2011',
      gdp: 205,
    },
    {
      name: '专利',
      year: '2012',
      gdp: 221,
    },
    {
      name: '专利',
      year: '2013',
      gdp: 229,
    },
    {
      name: '专利',
      year: '2014',
      gdp: 205,
    },
    {
      name: '专利',
      year: '2015',
      gdp: 136,
    },
    {
      name: '专利',
      year: '2016',
      gdp: 128,
    },
    {
      name: '专利',
      year: '2017',
      gdp: 157,
    },
    {
      name: '专利',
      year: '2018',
      gdp: 165,
    },

    {
      name: '专著',
      year: '2009',
      gdp: 52,
    },
    {
      name: '专著',
      year: '2010',
      gdp: 57,
    },
    {
      name: '专著',
      year: '2011',
      gdp: 61,
    },
    {
      name: '专著',
      year: '2012',
      gdp: 62,
    },
    {
      name: '专著',
      year: '2013',
      gdp: 51,
    },
    {
      name: '专著',
      year: '2014',
      gdp: 48,
    },
    {
      name: '专著',
      year: '2015',
      gdp: 43,
    },
    {
      name: '专著',
      year: '2016',
      gdp: 49,
    },
    {
      name: '专著',
      year: '2017',
      gdp: 48,
    },
    {
      name: '专著',
      year: '2018',
      gdp: 49,
    },
  ];
  const config = {
    data,
    xField: 'year',
    yField: 'gdp',
    seriesField: 'name',
    yAxis: {
      label: {
        formatter: (v) => `${v} 个`,
      },
    },
    legend: {
      position: 'top',
    },
    smooth: true,
    // @TODO 后续会换一种动画方式
    animation: {
      appear: {
        animation: 'path-in',
        duration: 5000,
      },
    },
    // style: {
    //     width: "100%",
    // }
  };

  return <Line {...config} />;
};

export default HomeLineChart;
